<template>
  <view class="pageContent">
    <view class="memberMain">
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">房屋信息</view>
        <view class="memberRight">
          <view class="memberItIn" v-if="formData.roomInfo">{{formData.roomInfo+'-'+formData.roomName}}</view>
        </view>
      </view>
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">成员真名</view>
        <view class="memberRight">
          <view class="memberItIn">{{formData.name || ''}}</view>
        </view>
      </view>
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">申请身份</view>
        <view class="memberRight">
          <view class="memberItIn">{{formData.roleName || ''}}</view>
        </view>
      </view>
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">身份证号</view>
        <view class="memberRight">
          <view class="memberItIn">{{formData.idCardNumber || ''}}</view>
        </view>
      </view>
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">手机号码</view>
        <view class="memberRight">
          <view class="memberItIn">{{formData.telephone || ''}}</view>
        </view>
      </view>
      <view class="memberItem" v-if="formData.idCardFrontUrl || formData.idCardBackUrl">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">证件照片</view>
        <view class="memberUpload">
          <image class="memberUpTrueIc" v-if="formData.idCardFrontUrl" :src="formData.idCardFrontUrl"
            @click="showPhoto(formData.idCardFrontUrl)" />
          <image class="memberUpTrueIc" v-if="formData.idCardBackUrl" :src="formData.idCardBackUrl"
            @click="showPhoto(formData.idCardBackUrl)" />
        </view>
      </view>
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">选择有效日期</view>
        <picker class="comePicRight" mode="date" :value="dateLim" @change="chooseLim">
          <!-- <view class="memberItIn">{{formData.dateLim}}</view> -->
          <input class="comePicLimIn" v-model="formData.dateLim" :placeholder="placeholder5" disabled="true" />
          <image class="comePicLim" :src="localImages +'/date.png'" mode="scaleToFill" />
        </picker>
      </view>
      <view class="memberItem" v-if="formData.applyReason">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">TA的留言</view>
        <view class="memberRightMsg">
          <view class="memberItIn">{{formData.applyReason || ''}}</view>
        </view>
      </view>
      <view class="memberItem">
        <text class="memberItSt empty">*</text>
        <view class="memberItTi">审批意见</view>
        <view class="memberRight">
          <input class="memberItIn" v-model="message" placeholder="请填写审批意见" maxlength="20" />
        </view>
      </view>
      <view class="btMain" v-if="type==0">
        <button class="btOne grey" @click="approvaPut(2)">拒绝</button>
        <button class="btOne" @click="approvaPut(1)">同意</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        id: '',
        formData: {
          roomInfo: '',
          dateLim: '',
          expireDate: '',
        },
        dateLim: '',
        message: '',
        type: '',
      }
    },
    computed: {},
    onLoad(options) {
      var title = '成员入住审批'
      this.id = options.id || 629;
      this.type = options.type || 0;
      if (this.type == 1) {
        var title = '审批详情'
      }
      wx.setNavigationBarTitle({
        title: title
      })
      this.approva();

    },
    onShow() {},
    onUnload() {
      this.reset()
    },
    methods: {
      reset() {
        this.message = ""
      },
      chooseLim(e) {
        var e = e.mp
        console.warn('chooseLim', e)
        this.dateLim = e.detail.value
        this.formData.dateLim = e.detail.value
      },
      approva() {
        var params = {
          roomApplyId: this.id,
        }
        util.wxRequestPro('/UserServer/owner/info/approva', params)
          .then((res) => {
            console.warn('approva', res)
            var json = res.param;

            // if(json.idCardFrontUrl) {
            //   json.idCardFrontUrl=config.IMAGE_APIHOST +json.idCardFrontUrl;
            // }
            // if(json.idCardBackUrl) {
            //   json.idCardBackUrl=config.IMAGE_APIHOST +json.idCardBackUrl;
            // }
            this.formData = json;

            if (!json.expireDate) {
              this.formData.dateLim = '永久有效'
            } else {
              this.formData.dateLim = json.expireDate
            }
            this.dateLim = json.expireDate || '';
          })
      },
      approvaPut(result = 0) {
        //租客撤回传0,业主：同意传1，拒绝传2.
        //同意审批,日期判断
        var dateLim=this.dateLim
        if (result==1 && !!dateLim.match(/^\d{4}\-\d{1,2}\-\d{1,2}$/)) {
          var date = new Date(dateLim.replace(/-/g, "/"))
          var nowDate = new Date(new Date().format("yyyy/MM/dd"))
          // console.log('diffTime', nowDate-date)
          if(date<nowDate){
            wx.showToast({
              title: "有效日期已经失效，请重新选择日期",
              icon: 'none'
            });
            return;
          }
        }
        var params = {
          roomApplyId: this.id,
          processResult: result,
          expireDate: dateLim,
        }
        if (this.message) {
          params['message'] = this.message
        }
        var putUrl = util.stringifyQs(params);
        console.warn('putUrl', putUrl)
        util.wxRequestPro('/UserServer/owner/info/approva?' + putUrl, {}, 'PUT')
          .then((res) => {
            wx.showToast({
              title: "操作成功",
              icon: 'none'
            });
            setTimeout(() => {
              wx.navigateBack()
            }, 500)
          })
      },
      showPhoto(...url) {
        console.warn('showPhoto', url)
        wx.previewImage({
          current: '', // 当前显示图片的http链接
          urls: url // 需要预览的图片http链接列表
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {
    background: #F3F6F9;
    padding: 20rpx 0rpx 0rpx 0rpx;
  }

  .memberTitle {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    line-height: 42rpx;
    padding: 30rpx 0rpx 20rpx 30rpx;
  }

  .memberMain {
    background-color: #FFFFFF;
    padding: 30rpx 30rpx 20rpx 30rpx;
  }

  .memberMaTi {
    color: #333333;
    line-height: 42rpx;
    font-size: 30rpx;
    padding: 0rpx 0rpx 10rpx 0rpx;
  }

  .memberType {
    display: inline-block;
    width: 150rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 6rpx;
    text-align: center;
    border: 1rpx solid #999999;
  }

  .memberType.select {
    background-color: #7A71FF;
    color: #FFFFFF;
  }

  .memberType+.memberType {
    margin-left: 30rpx;
  }

  .memberItem {
    display: flex;
    align-items: center;

    font-size: 30rpx;
  }

  .memberItSt {
    color: #FF6E5D;
  }

  .memberItSt.empty {
    color: #FFFFFF;
  }

  .memberItTi {
    width: 150rpx;
    color: #333333;
    margin-right: 40rpx;

    white-space: nowrap;
  }

  .memberRight {
    display: flex;
    height: 90rpx;
    width: 100%;
    align-items: center;
    border-bottom: 1rpx solid #E7E7E7;
  }

  .memberRightMsg {
    display: flex;
    width: 100%;
    min-height: 90rpx;
    align-items: center;
    border-bottom: 1rpx solid #E7E7E7;
  }

  .memberItIn {
    width: 88%;
  }

  .memberItIc {
    width: 35rpx;
    height: 30rpx;

    margin: 0rpx 10rpx 0rpx 20rpx;
  }

  .perType {
    display: inline-block;
    width: 90rpx;
    height: 45rpx;
    line-height: 45rpx;
    border-radius: 4rpx;
    text-align: center;
    margin-right: 20rpx;
    color: $primary;
    border: 1rpx solid $primary;
  }

  .perType.select {
    background-color: $primary;
    color: #FFFFFF;
  }

  .comePicRight {
    position: relative;
    display: flex;
    height: 90rpx;
    width: 100%;
    align-items: center;
    border-bottom: 1rpx solid #E7E7E7;
  }

  .comePicLimIn {
    width: 100%;
    text-align: right;
    margin: 0rpx 0rpx 0rpx 36rpx;
    padding: 0rpx 10rpx 0rpx 0rpx;
    // border: 1rpx solid #E7E7E7;
  }

  .comePicLim {
    position: absolute;
    right: 0rpx;
    top: 28rpx;
    width: 35rpx;
    height: 30rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .memberUpload {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .memberUpTrueIc {
    display: inline-block;
    vertical-align: top;
    width: 230rpx;
    height: 152rpx;
  }

  .btMain {
    display: flex;
  }

  .btOne {
    flex: 1;
    margin: 60rpx 16rpx 0rpx 16rpx;
  }

  .btOne.grey {
    background-color: #bbb;
  }
</style>
